<template>
  <div class="mid-box">
    <div class="box1">
      <div class="item-box">
        <div class="item">
          <div class="left-box">
            <div class="value">222</div>
            <div class="label">实时报关单量</div>
          </div>
          <div class="right-box">
            <div class="value">222</div>
            <div class="label">接单量</div>
          </div>
        </div>
        <div class="item">
          <div class="left-box">
            <div class="value">222</div>
            <div class="label">进出口报关单总量</div>
          </div>
          <div class="right-box">
            <div class="value">222</div>
            <div class="label">平均通关时间</div>
          </div>
        </div>
        <div class="item">
          <div class="left-box">
            <div class="value">222</div>
            <div class="label">实征税款</div>
          </div>
          <div class="right-box">
            <div class="value">222</div>
            <div class="label">验估补税</div>
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="item">
          <div class="left-box">
            <div class="value">222</div>
            <div class="label">原产地证数量</div>
          </div>
          <div class="right-box">
            <div class="value">222</div>
            <div class="label">减税额</div>
          </div>
        </div>
        <div class="item">
          <div class="left-box">
            <div class="value">222</div>
            <div class="label">入境检验检疫证明数量</div>
          </div>
          <div class="right-box">
            <div class="value">222</div>
            <div class="label">无纸化率</div>
          </div>
        </div>
        <div class="item">
          <div class="left-box">
            <div class="value">222</div>
            <div class="label">进出口船舶艘次</div>
          </div>
          <div class="right-box">
            <div class="value">222</div>
            <div class="label">进出境旅客人次</div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="left-box">
        <div class="tip-box">
          <commonItemTitleV2 title="服务企业"></commonItemTitleV2>
        </div>
        <div class="chart-title">
          <div class="label">服务企业数：</div>
          <div class="value">{{ serviceEnterpriseSum }}</div>
        </div>
        <div class="chart-box">
          <commonEcharts
            :options="box2LeftChartOptions"
            id="box2LeftChart"
            ref="box2LeftChartRef"
            v-if="isShowChart"
          />
        </div>
      </div>
      <div class="right-box">
        <div class="tip-box">
          <commonItemTitleV2 title="贸易数据"></commonItemTitleV2>
          <div class="unit">单位：亿元</div>
        </div>
        <div class="chart-box">
          <commonEcharts
            :options="box2RightChartOptions"
            id="box2RightChart"
            ref="box2RightChartRef"
            v-if="isShowChart"
          />
        </div>
      </div>
    </div>
    <div class="box3">
      <div class="left-box">
        <div class="tip-box">
          <commonItemTitleV2 title="进出口货物货值排名"></commonItemTitleV2>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="rankList1"
        >
          <div class="list-box">
            <div
              class="item-box rankItem"
              v-for="(item, index) in rankList1"
              :key="index"
            >
              <div class="right-msg">
                <div class="top-msg">
                  <div class="label">{{ item.name }}</div>
                  <div class="value">{{ item.val }}万元</div>
                </div>
                <div class="bot-pro">
                  <el-progress
                    :percentage="item.percentage"
                    :stroke-width="15"
                    :show-text="false"
                    color="#5797FF"
                  />
                </div>
              </div>
            </div>
          </div>
        </vue3ScrollSeamless>
      </div>
      <div class="right-box">
        <div class="tip-box">
          <commonItemTitleV2
            title="进出口国家（地区）货值排名"
          ></commonItemTitleV2>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="listScrollOptions"
          :dataList="rankList2"
        >
          <div class="list-box">
            <div
              class="item-box"
              v-for="(item, index) in rankList2"
              :key="index"
            >
              <div class="right-msg">
                <div class="top-msg">
                  <div class="label">{{ item.name }}</div>
                  <div class="value">{{ item.val }}万元</div>
                </div>
                <div class="bot-pro">
                  <el-progress
                    :percentage="item.percentage"
                    :stroke-width="15"
                    :show-text="false"
                    color="#5797FF"
                  />
                </div>
              </div>
            </div>
          </div>
        </vue3ScrollSeamless>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import commonItemTitleV2 from "../../../components/commonItemTitleV2.vue";
import commonEcharts from "../../../components/commonEcharts.vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";

import serviceEnterpriseJson from "../../../mock/serviceEnterprise.json";
import tradeDataJson from "../../../mock/tradeData.json";

import importAndExportGoodsRankJson from "../../../mock/importAndExportGoodsRank.json";
import importAndExportCountRankJson from "../../../mock/importAndExportCountRank.json";

const box2LeftChartRef = ref<InstanceType<typeof commonEcharts> | null>(null);
const box2RightChartRef = ref<InstanceType<typeof commonEcharts> | null>(null);
const serviceEnterpriseData:any = ref(serviceEnterpriseJson.data);

const serviceEnterpriseSum = ref(0);
const computedServerSum = () => {
  serviceEnterpriseSum.value = 0;
  serviceEnterpriseData.value.forEach((item:any) => {
    serviceEnterpriseSum.value += item.value;
  });
};
computedServerSum();
const box2LeftChartOptions = ref({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["40%", "70%"],
      itemStyle: {
        borderRadius: 4,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        formatter: "{b}\n{c}",
        lineHeight: 16,
        color: "#777777",
      },
      data: serviceEnterpriseData.value,
    },
  ],
});

const tradeData:any = ref(tradeDataJson.data);
const box2RightChartOptions = ref({
  grid: {
    top: 26,
    bottom: 60,
    left: 26,
    right: 26,
  },
  xAxis: {
    type: "category",
    data: tradeData.value.x,
    // data: ["1", "3", "3", "4"],
    axisLine: {
      lineStyle: {
        color: "#D6D6D6",
      },
    },
    axisLabel: {
      color: "#777777",
      fontSize: 13,
      formatter: function (val: any) {
        var strs = val.split(""); //字符串数组
        var str = "";
        for (var i = 0, s; (s = strs[i++]); ) {
          //遍历字符串数组
          str += s;
          if (!(i % 4)) str += "\n"; //按需要求余
        }
        return str;
      },
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        type: [2, 1],
        color: "rgba(206, 206, 206, .8)",
      },
    },
  },
  series: [
    {
      data: tradeData.value.y,
      // data:[200,2000,3000,4000],
      type: "bar",
      itemStyle: {
        color: " #5797FF",
      },
      barWidth: 20,
      label: {
        show: true,
        color: "#298BFF",
        fontSize: 12,
        position: "top",
      },
    },
  ],
});
const rankList1 = ref(importAndExportGoodsRankJson.data);
const rankList2 = ref(importAndExportCountRankJson.data);
const listScrollOptions = ref({
  //   singleHeight: 0,
  step: 0.5,
});
const isShowChart = ref(true);
const resizeRender = () => {
  console.log("mid渲染");
  // box2LeftChartRef.value?.resize();
  // box2RightChartRef.value?.resize();
  isShowChart.value = false;
  setTimeout(() => {
    isShowChart.value = true;
  }, 0);
};
onMounted(() => {
  nextTick(() => {
    // box2RightChart();
  });
});
defineExpose({
  resizeRender,
});
</script>

<style scoped lang="scss">
.mid-box {
  .box1 {
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 0px 6px 1px rgba(22, 99, 163, 0.2);
    border-radius: 8px 8px 8px 8px;
    .item-box {
      display: flex;
      .item {
        display: flex;
        flex: 1;
        height: 114px;
        padding: 28px 0;
        box-sizing: border-box;
        background: linear-gradient(180deg, #ebfbff 0%, #d8e7ff 100%);
        border-radius: 4px 4px 4px 4px;
        .left-box,
        .right-box {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 15px;
          box-sizing: border-box;
          .value {
            height: 30px;
            font-weight: 900;
            font-size: 22px;
            line-height: 30px;
            color: #298bff;
          }
          .label {
            height: 20px;
            margin-top: 6px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
            color: #144783;
          }
        }
        .right-box {
          border-left: 1px solid #ffffff;
        }
      }
      .item:nth-of-type(2n) {
        margin: 0 10px;
      }
    }
    .item-box:first-of-type {
      margin-bottom: 10px;
    }
  }
  .box2,
  .box3 {
    display: flex;
    margin: 16px 0;
    .left-box {
      flex: 1;
      height: 290px;
      padding: 15px 16px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 0px 6px 1px rgba(22, 99, 163, 0.2);
      border-radius: 8px 8px 8px 8px;
      // .tip-box {
      // }
      .chart-title {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: 10px;
        .label {
          margin-bottom: 2px;
          font-weight: 600;
          font-size: 14px;
          color: #298bff;
        }
        .value {
          margin-left: 4px;
          font-weight: 900;
          font-size: 24px;
          color: #298bff;
        }
      }
      .chart-box {
        width: 100%;
        height: 195px;
      }
    }
    .right-box {
      flex: 1;
      margin-left: 16px;
      height: 290px;
      padding: 15px 16px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 0px 6px 1px rgba(22, 99, 163, 0.2);
      border-radius: 8px 8px 8px 8px;
      .tip-box {
        display: flex;
        align-items: center;
        .unit {
          margin-left: 10px;
          font-weight: 400;
          font-size: 13px;
          color: #777777;
        }
      }
      .chart-box {
        width: 100%;
        height: 236px;
      }
    }
  }
  .box3 {
    .left-box,
    .right-box {
      height: 320px;
      .tip-box {
        margin-bottom: 30px;
      }
      .scroll-wrap {
        height: 224px;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
      }
      .list-box {
        // height: 216px;
        padding: 0 20px;
        box-sizing: border-box;
        .item-box {
          display: flex;
          height: 56px;

          .right-msg {
            flex: 1;
            margin-left: 10px;
            .top-msg {
              display: flex;
              justify-content: space-between;
              height: 20px;
              margin-bottom: 6px;
              .label,
              .value {
                font-weight: 400;
                font-size: 14px;
                color: #777777;
              }
              //   .value {
              //     font-weight: 400;
              //     font-size: 14px;
              //     color: #777777;
              //   }
            }
            .bot-pro {
              ::v-deep(.el-progress-bar__outer) {
                height: 8px !important;
                // background-color: rgba(24, 202, 255, 0.2);
                background-color: rgba(118, 130, 162, 0.1);
              }
            }
          }
        }
        // .item-box:nth-of-type(2n) {
        //   margin: 20px 0;
        // }
      }
      .list-box::-webkit-scrollbar {
        display: none;
      }
    }
    // .right-box {
    // }
  }
}
</style>
